<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{num}}</div>
        <div v-on:click='handle0'>
            <!-- 事件修饰符，阻止事件冒泡 -->
            <button @click.stop='handle1'>点击</button>
        </div>
        <div>
            <!-- 阻止事件默认行为 -->
            <a href="http://www.baidu.com" @click.prevent="handle2">百度</a>
        </div>
        <!-- 还可以同时两个连写，顺序很重要，如果prevent在前面会阻止所有点击，而prevent在后面只会阻止对元素自身的点击 -->
    </div>

   


</body>
<script src="./V/vue.js"></script>
<script>

var vm = new Vue({
    el:'#app',
    data:{
        num:0
    
    },
    methods:{
        handle0:function(e){
            this.num++
        }, handle1:function(e){
           // e.stopPropagation()  //传统方式阻止事件冒泡
        },handle2:function(e){
            // 传统阻止默认行为
            // e.preventDefault()
        }
    }
})


</script>
</html>